<template>
  <div class="home">
    <header>
       <p></p>
       <p>满易行</p>
       <p></p>
     </header>
     <div class="banner">
       <!-- <img src="../assets/img/banner@2x.png" > -->
       <p>马上计算</p>
     </div>
     <div class="index_cnt">
       <div class="index_cnt_left">
           <dl>
             <dt><img src="../assets/img/ETC_icon@2x.png"></dt>
             <dd>ETC充值圈</dd>
           </dl>
           <dl>
             <dt><img src="../assets/img/road_icon@2x.png"></dt>
             <dd>高速通行费及邮费估算</dd>
           </dl>
       </div>
       <div class="index_cnt_rgt">
         <dl>
             <dt><img src="../assets/img/roader_icon@2x.png" ></dt>
             <dd>实时路况</dd>
           </dl>
           <dl>
             <dt><img src="../assets/img/weizhang_icon@2x.png" ></dt>
             <dd>违章查询</dd>
           </dl>
           <dl>
             <dt><img src="../assets/img/comen_icon@2x.png"></dt>
             <dd>邀请好友</dd>
           </dl>
       </div>
     </div>
     <nav>
       <ul>
         <li>
            <router-link to = '/home'>
              <img src="../assets/img/Homepage_icon@2x.png" >
              <a href="#">首页</a>
            </router-link>
         </li>
         <li>
         <router-link to = '/zhushou'>
            <img src="../assets/img/assistant_icon@2x.png" >
            <a href="#">助手</a>
          </router-link>
         </li>
         <li>
           <router-link to = '/mine'>
              <a href="#"><img src="../assets/img/my_icon@2x.png" ></a>
              <a href="#">我</a>
           </router-link>
         </li>
       </ul>
       <!-- <router-view></router-view> -->
     </nav>

  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      msg: 'Welcome to header.vue'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '.././assets/less/style.less';
.home {
  height: 100%;
  background: #f7f7f7;
  header {
   .px2rem(height,88);
    background: #21d094;
    display: flex;
    align-items: center;
    justify-content: center;
    /* .border(1,solid,#000); */
    p {
      .font(30,#fff);
    }
  }
  .banner {
    .px2rem(height,300);
    background: url('../assets/img/banner@2x.png');
    background-size: cover;
    position: relative;
    /* img {
      .px2rem(width,750);
      .px2rem(height,300);
    } */
    p {
      position: absolute;
      .right(60);
      .bottom(40);
     /* .margin-top(-90); */
     background: #fff;
     .font(24,#4da79b);
     .padding(10,30,10,30);
     .border-radius(20);
    }
  }
  .index_cnt {
    .px2rem(height,750);
    margin-top: 5%;
    display: flex;
    justify-content: center;
    /* .border(1,solid,#000); */
    .font(30,#fff);
    .index_cnt_left {
      display: flex;
      flex-direction: column;
      width: 45%;
      dl {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        dd {
          .margin-top(30);
        }
        dt {
          img{
            .px2rem(height,130 );
            .px2rem(width,130 );
          }
        }
        &:nth-child(1) {
          background: #19d3c5; 
        }
        &:nth-child(2) {
          background: #82d65c;
        }
      }
    }
    .index_cnt_rgt {
      width: 45%;
      margin-left: 2%;
      display: flex;
      flex-direction: column;
      dl {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        dd {
          .margin-top(30);
        }
        dt {
          img{
            .px2rem(height,100 );
            .px2rem(width,100 );
          }
        }
        &:nth-child(1){
          background: #f89f37;
        }
        &:nth-child(2){
          background: #38c6f4;
        }
        &:nth-child(3){
          background: #f8d04a;
        }
      }
    }
  }
  nav {
    .px2rem(height,98);
    /* .border(1,solid,#000); */
    background: #fff;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    ul {
      height: 100%;
      display: flex;
      li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &:nth-child(1){
          a:nth-child(1){
            img {
              .px2rem(height,39);
              .px2rem(width,39);
            }
          }
        }
        &:nth-child(2){
          a:nth-child(1){
            img {
              .px2rem(height,36);
              .px2rem(width,36);
            }
          }
        }
        &:nth-child(3){
          a:nth-child(1){
            img {
              .px2rem(height,38);
              .px2rem(width,34);
            }
          }
        }
        a {
          display: block;
        }
      }
    }
  }
}

</style>
